<template>
  <div>
    <x-collapse expand :title="t['私有配置']">
      <a-space fill direction="vertical">
        <a-space v-if="currentShape.type !== 'd-qrcode'" class="flex justify-between px-4" fill>
          <div class="text-[12px] text-gray-500 text-nowrap">{{ t["文字"] }}</div>
          <a-input v-model="currentShape.text" style="width: 120px" @change="changeText"></a-input>
        </a-space>
        <a-space class="flex justify-between px-4" fill>
          <div class="text-[12px] text-gray-500 text-nowrap">{{ t["大小"] }}</div>
          <a-input-number
            v-model="currentShape.size"
            :options="colorList"
            style="width: 120px"
          ></a-input-number>
        </a-space>
        <a-space class="flex justify-between px-4" fill>
          <div class="text-[12px] text-gray-500 text-nowrap">{{ t["背景颜色"] }}</div>
          <color-picker
            v-model="currentShape.bgcolor"
            style="width: 120px"
            @change="setbackgroundColor"
          ></color-picker>
        </a-space>
        <a-space class="flex justify-between px-4" fill>
          <div class="text-[12px] text-gray-500 text-nowrap">{{ t["线条颜色"] }}</div>
          <color-picker
            v-model="currentShape.textColor"
            style="width: 120px"
            @change="setLineColor"
          ></color-picker>
        </a-space>
      </a-space>
    </x-collapse>
  </div>
</template>

<script setup lang="ts">
import { previewQrCode } from "@/api/service/utils";
import { colorList } from "@/data/options/selection";
import { currentShape } from "@/views/paint/modules/data/shapes";

const t = translate("公共模块");

const preview = async () => {
  return previewQrCode({
    text: currentShape.value.text,
    /* 二维码的大小 */
    size: currentShape.value.size,
    bgcolor: currentShape.value.bgcolor,
    textColor: currentShape.value.textColor,
    margin: 0
  });
};
const setbackgroundColor = async (color: any) => {
  currentShape.value.bgcolor = color;
  const qrimage = await preview();
  currentShape.value.src = qrimage.data;
};

const setLineColor = async (color: any) => {
  currentShape.value.textColor = color;
  const qrimage = await preview();
  currentShape.value.src = qrimage.data;
};
async function changeText() {
  const qrimage = await preview();
  currentShape.value.src = qrimage.data;
}

watch(
  currentShape,
  () => {
    const { type, w, h } = currentShape.value;
    if (type === "d-qrcode" || type === "qrcode") {
      currentShape.value.size = (w + h) / 2;
    }
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.qrcode-text {
  input {
    border: 1px solid #eee;
    text-align: center;
    line-height: 24px;
    width: 100px;
    padding: 0;
  }
}
</style>
